<template>
	<view class="page">
		<navbar :title="'蜂竞技-'+game_info.name+'-训练模式'" />

		<view class="container">
			<!-- <view class="page-h3 mt-0">选择模式
				<view class="title-en-common">Select Mode</view>
			</view>
			<view class="flex">
				<view class="level-item2" v-for="(item, index) in mode_list" :key="index">
					<view @click="fnChangeMode(item,index)" class="level-item"
						:class="current_mode_info.name === item.name ? 'active' : ''">
						<view class="level-icon">
							<image class="icon" src="/static/image/fengyongyanxuan/game-pcjj.png" mode="heightFix">
							</image>
						</view>
						<view class="level-txt">
							<view class="label">{{item.name}}
								<view class="title-en-common">{{ item.enName }}</view>
							</view>
							<view class="msg">{{item.msg}}</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="page-h3">选择难度
				<view class="title-en-common">Select Difficulty</view>
			</view>
			<view class="flex1">
				<view class="level-item3" v-for="(item, index) in level_list" :key="index">
					<view @click="fnChangeLevel(item, index)" class="level-item level-item1"
						:class="current_level_info.name === item.name ? 'active' : ''">
						<view class="level-icon level-icon1">
							<image class="icon" src="/static/image/fengyongyanxuan/game-jggpc.png" mode="heightFix">
							</image>
						</view>
						<view class="label">{{item.name}}
							<view class="btn-en">{{ item.enName }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="tabs">
				<view class="tab-item" :class=" activeTab == 0 ? 'activeTab' : ''" @click="changeTabFn(0)">选择词库<view
						class="btn-en">Select Word List</view>
				</view>
				<view class="tab-item" :class=" activeTab == 1 ? 'activeTab' : ''" @click="changeTabFn(1)">选择计划<view
						class="btn-en">Select Study Plan</view>
				</view>
			</view> -->
			<!-- 只有已解锁词库可选， isExpired=0已解锁-->
			<view class="page-h3" style="margin-top: 20px;">选择组别
				<view class="title-en-common">Select Group</view>
			</view>
			<view class="flex1">
				<view class="level-item3" v-for="(item, index) in ciku_list" :key="index"
					@click="fnChangeCiku(item,index)">
					<view class="level-item level-item1" :class="current_ciku_info.id ===item.id ? 'active' : ''">
						<view class="level-icon level-icon1">
							<image class="icon" src="/static/image/fengyongyanxuan/game-jggpc.png" mode="aspectFit">
							</image>
						</view>
						<view class="level-txt">
							<view class="label" style="white-space: nowrap;font-family:hzgb;">{{item.title}}</view>
							<view class="msg">{{item.alias}}</view>
						</view>
					</view>
					<image class="lock" v-if="item.isExpired == 1" src="../../../static/image/course/course-lock.png"
						mode="widthFix"></image>
				</view>
			</view>
			<view v-show="false" class="page-h3" style="margin-top: 20px;">选择人数
				<view class="title-en-common">Select Number of spellers</view>
			</view>
			<view v-show="false" class="card">
				<view class="slider_box">
					<uv-slider v-model="people_num" @change="changePeopleNum" :min="game_config.min_people_num"
						:max="game_config.max_people_num" blockSize="28" step="1" activeColor="#f0d76f"
						inactiveColor="#fff" block-color="#deba5e" blockStyle="height:70px"></uv-slider>
					<view class="slider_num">
						<view>{{game_config.min_people_num}}</view>
						<view>{{game_config.max_people_num}}</view>
					</view>
					<view class="slider_btn">
						{{people_num}}人
					</view>
				</view>
			</view>
			<view class="page-h3" style="height: 50px;"></view>
			<view class="btns">
				<view class="btn btn1" @click="fnCancelCreate()">取消
					<view class="btn-en">Cancel</view>
				</view>
				<view class="btn btn2" @click="fnCreateRoom()">确认创建
					<view class="btn-en">Confirm Create</view>
				</view>
			</view>
		</view>

		<selectContentView v-if="showPromptbox" :msg="msg" confirmTitle="确认" cancelTitle="取消" @confirm="confirmCreate"
			@cancel="showPromptbox=false"></selectContentView>
	</view>
</template>

<script>
	import navbar from '../../../components/gamesNav.vue'
	export default {
		config: {
			disableScroll: true
		},
		components: {
			navbar
		},
		data() {
			return {
				game_mode: '',
				plan_list: [],
				planTypeList: [{
						key: 'week',
						value: '周计划'
					},
					{
						key: 'month',
						value: '月计划'
					},
					{
						key: 'semester',
						value: '学期计划'
					},
					{
						key: 'year',
						value: '学年计划'
					}
				],
				pwd: '',
				people_num: 2,
				game_config: {},
				pwdType: 'password',

				current_level_info: {
					'name': '初选级',
					enName: 'Preliminary Level',
					'status': 1
				},
				level_list: [{
					'name': '初选级',
					enName: 'Preliminary Level',
					'status': 1
				}, {
					'name': '复选级',
					enName: 'Regional Level',
					'status': 0
				}, {
					'name': '城市级',
					enName: 'City Level',
					'status': 0
				}, {
					'name': '全国级',
					enName: 'National Level',
					'status': 1
				}],
				activeTab: 0,
				activePlan: null,
				errMsg: '',
				current_mode_info: {
					'name': '完整模式',
					enName: 'Full Mode',
					'msg': '淘汰继续比赛决出冠军',
					'status': 1
				},
				mode_list: [{
					'name': '完整模式',
					enName: 'Full Mode',
					'msg': '被淘汰后也可以继续答题，直到比赛结束',
					'status': 1
				}, {
					'name': '真实模式',
					enName: 'Real Mode',
					'msg': '被淘汰后无法继续答题，体验真实赛程',
					'status': 1
				}],

				user_info: {},
				game_info: {},
				showPromptbox: false,

				ciku_list: [],
				userLevel: 0, // 当前选手所在组别
				current_ciku_info: {},
				currentPlanInfo: {}
			};
		},
		onLoad(options) {
			var that = this;
			that.user_info = JSON.parse(uni.getStorageSync('USER_INFO'));
			that.game_info = JSON.parse(decodeURIComponent(options.game_info));
			that.game_mode = options.game_mode;
			console.log(that.user_info, that.game_info);
			// 当前选手组别
			const grade = Number(this.user_info.grade)
			this.userLevel = grade < 7 ? 1 : grade < 10 ? 2 : grade < 12 ? 3 : 4
			console.log(this.userLevel)

			that.getGameConfigInfo();
			console.log('创建房间：', that.game_info, that.game_mode)
			that.getPlanList()
		},
		mounted() {
			const that = this
			that.getTypeList();
			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'menu'
			})
		},
		onShow() {
			const that = this
			that.$eventBus.$emit('callMethodIn_background_type', {
				type: 'menu'
			})
		},
		methods: {
			// 获取游戏配置信息
			getGameConfigInfo() {
				var that = this;
				that.$http.getGameConfigInfo({
					'game_id': that.game_info.id,
					'game_mode': that.game_mode
				}).then(res => {
					if (res.code === 200) {
						that.game_config = res.data;
						that.people_num = that.game_config.default_people_num;
					}
				})
			},

			// 获取学生或教师身份查询可用计划
			getPlanList() {
				var that = this;
				that.$http.getPlanList({
					'page': 1,
					'limit': 20,
					'gameFlag': 'JGGPC'
				}).then(res => {
					if (res.code === 200) {
						res.data.forEach(item => {
							item.typeStr = this.planTypeList.find(p => p.key === item.type).value
						})
						that.plan_list = res.data;
					}
				})
			},

			changeTabFn(index) {
				this.activeTab = index
				this.activePlan = null
				this.current_ciku_info = {}
			},

			choosePlan(item, index) {
				this.activePlan = index
				this.currentPlanInfo = item
			},

			fnChangeMode(item, index) {
				var that = this;
				if (item.status == 1) {
					that.current_mode_info = item;
				} else {
					uni.showToast({
						title: '暂不可选',
						icon: 'none',
						duration: 2000
					})
				}
			},
			fnChangeLevel(item, index) {
				var that = this;
				that.current_level_info = item;
			},
			fnChangeCiku(item, index) {
				var that = this;

				console.log(item);
				if (!item.usable) {
					uni.showToast({
						title: '暂不可用',
						icon: 'none',
						duration: 2000
					})
					return false;
				}
				that.current_ciku_info = item;
			},
			// 创建房间
			fnCreateRoom() {
				var that = this;
				if (that.current_ciku_info && that.current_ciku_info.id) {
					this.errMsg = ''
				} else {
					this.errMsg = '请选择组别'
				}
				if (!this.errMsg) {
					that.msg = "您正在创建【" + that.game_info.name + "】游戏，人数" + that.people_num + "人";
					that.showPromptbox = true
				} else {
					uni.showToast({
						title: this.errMsg,
						icon: 'none',
						duration: 2000
					})
				}
			},

			// 取消创建房间
			fnCancelCreate() {
				var that = this;
				uni.navigateBack();
			},

			// 确认创建
			confirmCreate() {
				var that = this;
				const params = {
					matchType: 'jggpc', //慧眼识词
					pcjj_level: that.current_level_info.name,
					game_id: that.game_info.id,
					people_num: that.people_num,
					pwd: that.pwd,
					type_id: that.current_ciku_info.id,
					game_mode: that.game_mode,
					groupname: that.game_mode + '|' + that.current_mode_info.name + '|' + that.current_level_info
						.name + '|' + that.current_ciku_info.title
				}

				that.showPromptbox = false;

				that.$http.createRoom(params).then(res => {
					if (res.code === 200) {
						var group_info = res.data;
						uni.navigateTo({
							url: '/pages/games/jggpc/game_jggpc' +
								'?group_info=' + encodeURIComponent(JSON.stringify(group_info)) +
								'&game_mode=' + that.game_mode +
								'&game_info=' + encodeURIComponent(JSON.stringify(that.game_info)),
							animationType: 'slide-in-bottom', // 右侧滑入效果
							animationDuration: 300 // 动画时长300毫秒
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			fnSelectType(item, index) {
				var that = this;
				if (item.status == 0) {
					uni.showToast({
						title: '暂不可用',
						icon: 'none',
						duration: 2000
					})
					return false;
				}
				that.current_type_info = item;
			},

			// 改变人数
			changePeopleNum(e) {
				console.log(e)
			},

			eyeFn() {
				this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
			},

			cancelFn() {},

			// 获取分组
			getTypeList() {
				var that = this;
				that.$http.getTypeList({
					pid: 6012,
				}).then(res => {
					if (res.code === 200) {
						that.ciku_list = res.data;
						this.current_ciku_info = this.ciku_list.find(item => item.sort_number == this.userLevel) ||
							this.ciku_list[0]
						this.ciku_list.forEach(item => {
							if (item.sort_number === this.userLevel || item.sort_number === 4) {
								item.usable = true
							} else {
								item.usable = false
							}
						})
						console.log(this.ciku_list)
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.page {
		background-image: url(/static/image/app/gameBg.png);
		// background-color: #f7b52c;
		background-size: 100% auto;
		background-position: top left;
		background-repeat: no-repeat;
		width: 100%;
		height: 100vh;
		background-size: 100% 100%;
		font-family: hzgb;
		color: #fff;
		height: 100vh;
		overflow-y: scroll;
	}

	.container {
		padding: 24px 6px;
	}

	.page-h1 {
		font-size: 24px;
	}

	.page-h3 {
		font-size: 16px;
		text-align: center;
		margin-bottom: 16px;
		margin-top: 0px;
	}

	.pwd-input {
		border: none;
		border-width: 0 !important;
		font-size: 14px;
		font-family: normal;
		text-align: center;

		&.uv-border {
			border-width: 0 !important;
		}
	}

	.pwd {
		width: 100%;
		height: 36px;
		background: #fff8e1;
		border-radius: 32px;
		box-sizing: border-box;
		padding-left: 8px;
		padding-right: 2px;
		margin-top: 40px;
		position: relative;

		.eye {
			position: absolute;
			right: 10px;
			top: 0;
			height: 30px;
			width: 30px;
			margin-top: 3px;
		}
	}

	// 创建房间页面，选择人数的滑块样式
	::v-deep .uni-slider-handle-wrapper {
		height: 14px !important;
		border-radius: 14px !important;
	}

	::v-deep .uni-slider-track {
		border-top-left-radius: 14px;
		border-bottom-left-radius: 14px;
	}

	.card {
		background: rgba(255, 255, 255, 0.15);
		border-radius: 14px;
		padding: 10px 10px 20px;
	}

	.slider_num {
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 18px;
	}

	.slider_btn {
		border: 2px solid #242018;
		background: linear-gradient(to bottom, #151004, #353330);
		height: 30px;
		width: 110px;
		text-align: center;
		line-height: 26px;
		border-radius: 30px;
		margin: 0 auto;
		font-size: 14px;
	}

	.btns {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 60px 0 40px;
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;

		.btn {
			width: 140px;
			height: 40px;
			text-align: center;
			// line-height: 40px;
			padding-top: 6px;
			font-size: 16px;
			border-radius: 10px;
		}

		.btn1 {
			background: linear-gradient(to top, #130e00, #373632);
			box-shadow: 0 6px 0 0 #363531;
		}

		.btn2 {
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0 6px 0 0 #d9b059;
			color: #000;
		}
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex2 {
		padding: 0 6px;
	}

	.level-item {
		background: rgba(255, 255, 255, 0.15);
		border: 3px solid transparent;
		border-radius: 14px;
		padding: 10px;
		text-align: center;
		font-size: 14px;

		.level-icon {
			// background-image: url(/static/image/fengyongyanxuan/game-jspc.png);
			// background-size: contain;
			// background-position: center;
			// background-repeat: no-repeat;
			width: 60px;
			height: 60px;
			margin-bottom: 12px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 6px;
			border: 2px solid #fdec7e;

			.icon {
				width: 32px;
				height: 32px;
				margin-bottom: 8px;
			}
		}

		&.active {
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			border-color: #fde458;
			color: #000;

			.level-icon {
				background: linear-gradient(to bottom, #130e00, #373632);
				border-color: #31302d;
			}
		}
	}

	.level-item2 {
		flex: 1;
		padding: 6px;

		.level-item {
			display: flex;
			align-items: center;

			.level-icon {
				margin-bottom: 0;
				margin-right: 8px;
			}

			.msg {
				font-family: normal;
				font-size: 12px;
				margin-top: 4px;
			}

			.level-txt {
				text-align: left;
			}
		}
	}

	.flex1 {
		overflow: hidden;
	}

	.level-item3 {
		width: 50%;
		padding: 6px;
		box-sizing: border-box;
		float: left;

		.level-item {
			display: flex;
			align-items: center;
			padding: 8px 4px;
			height: 70px;

			.label {
				font-size: 14px;
			}

			.level-icon {
				border-color: transparent;
				margin-bottom: 0;
				margin-right: 4px;
				width: 34px;
				height: 34px;
				border-radius: 34px;

				.icon {
					width: 34px;
					height: 34px;
					margin-bottom: 0;
				}
			}

			&.level-item1 {
				padding: 10px;
				height: auto;
			}

			.level-icon1 {
				width: 60px;
				height: 60px;
				border-radius: 6px;
				margin-right: 10px;
				border: 2px solid #fdec7e;

				.icon {
					width: 34px;
					height: 34px;
					margin-bottom: 8px;
				}
			}

			.level-txt {
				// text-align: left;
				font-family: normal;
				flex: 1;

				.label {
					width: 100%;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					margin-bottom: 4px;
				}

				.msg {
					font-size: 10px;
				}
			}
		}

		position: relative;

		.lock {
			position: absolute;
			right: 12px;
			bottom: 12px;
			width: 20px;
			height: 20px;
		}
	}

	::v-deep .uni-input-input {
		text-align: center;
	}

	.mt-0 {
		margin-top: 0;
	}

	.tabs {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 16px;
		margin-top: 46px;

		.tab-item {
			font-size: 16px;
			border: 2px solid transparent;
			background: rgba(255, 255, 255, 0.15);
			width: 160px;
			height: 48px;
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}

		.activeTab {
			color: #000;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			border-color: #fde458;
		}
	}

	.plan-item {
		width: 100%;
		background: rgba(255, 255, 255, 0.15);
		color: #fff;
		font-size: 18px;
		padding: 0 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80px;
		border-radius: 80px 14px 14px 80px;
		margin-bottom: 10px;

		.plan-name {
			width: 72%;
		}

		.plan-en {
			text-align: center;
			font-size: 14px;
			font-family: normal;
		}

		&.active {
			color: #000;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			border-color: #fde458;
		}
	}

	.no_data {
		width: 100%;
		text-align: center;

		.img {
			width: 40%;
		}
	}
</style>